
  .dis-tip {
    padding: 20px 0 0;
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: #999999;

  }

  .client-detail-fixer {
    position: fixed;
    width: 100%;
    z-index: 200;

    // .body-right>div {
    //   position: relative;

    //   .vux-popover {
    //     top: 10px!important;
    //     width: 192px!important;
    //     left: initial!important;
    //     right: 71px!important;
    //   }
    // }

    .custom-item-container>.new-cst-item {
      border-bottom: none;
      margin-bottom: 0;
    }
    .prop-label {
      margin-bottom: 7px;
    }

    .new-info-bottom {
      border-bottom: 1px solid #f3f0f0;
    }

    .csi-item-right {
      padding-right: 4px;

      a {
        color: #666666;
        display: inline-block;
        padding: 8px 0;
        font-size: 14px;
      }
    }
  }

  .client-detail-page {
    .expander {
      position: fixed;
      bottom: 76px;
      font-weight: bold;
      left: -1px;
      text-align: center;
      font-size: 12px;
      width: 20px;
      line-height: 20px;
      padding: 10px 0px;
      border: 1px solid #34adff;
      color: #34adff;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      z-index: 10;
    }
  }

  .normal-client-detail {
    width: 100%;
    color: #6E6E6E;
    top: 0;
    left: 0;




    i {
      font-style: normal;
    }

    .mgt {
      margin-top: 10px
    }

    .mark-ico {
      margin: 0;
      padding: 0;
    }



    .no-arrow-wrap {
      .timeline-block:not(.left) {
        width: 100%;
        float: none;
        margin: 0;
        max-width: initial;

        .timeline-content {
          float: none;
          margin: 0 auto;
          width: 280px;
        }
      }
    }



    .right {
      //.timeline-content-body>h4{
      //  color: white;
      //}
    }

    .call-btn {
      @size: 38px;
      @color: #35ADFF;
      text-align: center;
      background-color: @color;
      color: white;
      width: @size;
      display: inline-block;
      height: @size;
      padding: 2px;
      border-radius: @size;
      line-height: @size;
      font-size: @size;
      margin-left: 50px;
      box-shadow: 0 0 3px #5A8532;

    }

    .client-desc-babies {
      margin-top: 10px
    }



    .client-desc-labels {
      font-size: 12px;
      padding: 0 6px;
      border-radius: 24px;
      color: #999999;
      // background-color: #F9F9F9;
      // margin-top: 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      overflow: hidden;
    }

    .arrow-go-blue {
      float: right;
      width: 10px;
      height: 10px;
      margin-top: 6px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-image:  url("@{QINIU_STATIC}/arrow-go-blue.png");
    }

    .client-desc-collapse {
      padding: 12px 10px 10px 0;

    }

    .client-desc-collapse-line {
      height: 1px;
      width: 100%;
      border-bottom: 1px solid #F7F7F7;
    }



    .collapse-trigger {
      background-repeat: no-repeat;
      background-position: center;
      // background-size: cover;
      background-image:  url("@{QINIU_STATIC}/collapser.png");
      height: 14px;
      width: 14px;
      margin: -10px auto 0;
      background-color: white;
      padding: 0 12px;
      background-size: contain;
    }

    .pull-left {
      float: left;
    }

    .pull-right {
      float: right;
    }

    .baby-list {
      // padding-left: 20px;
    }

    .load-babies {
      position: absolute;
      display: inline-block;
      left: 50%;
      margin-left: -20px;
      bottom: -10px;
      transform: rotate(-45deg);
    }
    div.pdscroll._v-container {
      top:6.8rem;
    }

    div.pdscroll.callable._v-container {
      top: 8rem;
    }

    .follow-state {
      padding:0 8px 0 0;
      float: left;
      color:#bdbdbd;
      font-size:12px;
      line-height: 12px;
      border-radius:6px;
      margin-right:20px;
    }

    .client-desc-property {
      i {
        font-style: normal;
      }
    }

    .scroller-container {
      position: relative;

      .grey-stage {
        background-color: #EFEFEF;
      }
    }

    .nrotate {
      transform: rotate(180deg);
      margin-top: -6px;
    }

    .client-desc-collapse-property {
      @size: 20px;
      margin-top: 6px;
      overflow: hidden;

      .normal-baby-item:first-child {
        margin-left: 0px;
      }

      &>* {
        float: left;
      }

      .baby-item:first-child {
        margin-left: 0;
      }

      .normal-baby-item {
        width: @size;
        height: @size;
        padding:  0;
        line-height: 16px;
        background-position: center;

        .gender-ico {
          float: none;
          margin: 2.5px auto;
          display: block;
        }
      }



      .property-item {
        padding: 0 10px;
        border: 1px solid lightgrey;
        margin-left: 8px;
        line-height: 12px;
        height: 12px;
        font-size: 12px;
        padding: 3px 8px;
        font-weight: normal;
        border-radius: 6px;
        color: lightgrey;
        position: relative;
      }
    }

    .smaller-label {
      font-size: 12px;
      color: #6E6E6E;
    }

    .normal-label {
      font-size: 12px;
      font-weight: bolder;
    }

    .client-desc-basic {
      &.with-border {
        border-bottom: 1px solid #F7F7F7;
      }

      padding-bottom: 8px;
      margin-right: 8px;
    }

    .client-desc-basic-main {
      margin-left: 10px;
    }

    .client-desc-name {
      font-size: 20px;
      line-height: 20px;
      max-width: 12rem;
      height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media(min-width: 400px) {
      .client-desc-name {
        max-width: 13rem;
      }
    }

    .client-desc-contact {
      font-size: 14px;
      line-height: 14px;
      margin: 4px 0px 0 0;
    }

    .client-desc-property {
      line-height: 16px;
      margin-top: 6px;
    }


    .client-call-btn {
      // float: right;
      width: 100px;
      font-size: 12px;
      margin-right: 10px;
    }

    
    .client-desc-edit-trigger {
      @size: 34px;
      width: @size;
      height: @size;
      background-image:  url("@{QINIU_STATIC}/icon_edit.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 80%;
      display: block;
      border: 1px solid #C8ECFB;
      border-radius: 50%;
    }

    .menu-wrapper {
      height: @menu-item-size;
      position:fixed;
      left:0;
      bottom:0;
      z-index:100;
      width:100%;
    }

    .clue-desc {
      padding: 0.5em 0;
    }

    .client-detail-content {
       padding-left: 10px;
    }
    .client-detail-body {
      //  padding-top:12px;
      //  position: absolute;
      //  padding-left:20px;
      //  border-bottom:1px solid #eee;;
      //  padding-bottom:10px;
       position:fixed;
      //  margin-bottom: 15px;
       left:0;
       top:0;
       z-index:100;
       background-color:white;
       width:100%;
      //  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    .timeline-wrap{
      // padding-top:6em;
      padding-bottom:1em;
    }

    .imgs-main {
      &:extend(.clearfix all);
    }

    .messageImg{
      // width:60px;
      // height:60px;
      // object-fit:cover;
    }


    .messageImg:not(:last-child){
      margin-right:2%;
    }

     .alter-link{
       color:#35ADFF;
      //  border-bottom:1px solid #35ADFF;
       position:relative;
       font-style:normal;
       font-size: 12px;
       margin-left: 2px;
     }

    .client-desc {
       display:block;

       &>*{
       vertical-align:middle;
       }

    }


    .img-wrapper {
      @size: 58px;
      width: @size;
      height: @size;
      display:inline-block;

      img {
        border-radius:3em;
        border:1px solid #eee;
        width:100%;
        height:100%;
        object-fit:cover;
      }

    }

    .img-square {
      margin-right:8px;
      &:last-child {
        margin-right:0;
      }
    }

    .img-square{
      width: 56px;
      height:60px;
      overflow:hidden;
      padding:2px;
      float:left;
      margin-bottom:4px;
      background-color:white;
      border:1px solid white;
      border-radius:2px;



      img{
        width:100%;
        height:100%;
        object-fit:contain;

      }
    }

    @media (min-width:640px) {
      .img-square{
        width:80px;
        height:80px;
      }
    }


    .property-items{
      &:extend(.clearfix all);
      padding:10px 0 10px;

      &>span{
        float:left;
        line-height:15px;
        height:15px;
        padding-right:12px;
        font-size:14px;
      }

      @media( max-width: 320px) {
        &>span{
          font-size:12px;
        }
      }

      &>span:not(:last-child) {
        border-right:1px solid #B2B2B2;
      }

      &>span:not(:first-child) {
        padding-left:12px;
      }
    }

    @media(max-width: 320px) {
      .property-items {
        font-size: 12px;

        &>span:not(:first-child) {
          padding-left: 6px;
        }
      }
    }
    .clue-desc {
      // padding:6px 0 0;
    }

    .social-name {
      display:inline-block;
      margin-left:10px;
      margin-right:10px;
    }

    .grey{
      color:#B2B2B2!important;
    }

    .ico.grey{
      font-size:12px;
      color:#9C9C9C;
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float:left;
      }

      a {
        padding:2px 8px;
        display:block;
        color:white;
        font-size:12px;
        border-radius:6px;
        margin-right:10px;
        background-color:#35ADFF;
      }
    }

    .scroll-view{
      background-color:white;
    }

    .tag-item {
      padding: 4px 10px;
      margin-right: 5px;
      border-radius: 10px;
      border: 1px solid #78D1F5;
      color: #78D1F5;
      float: left;
      margin-top: 6px;
    }


    .tag-link {
      background-color: #e2f5fc;
      color: #78D1F5;
      width: 22px;
      height: 22px;
      text-align: center;
      line-height: 22px;
      float: left;
      margin-top: 10px;
      border-radius: 50%;

    }



    .normal-baby-item {
      height: 13px;
      padding: 6px 8px;
      line-height: 16px;
      float: left;
      color: #fff;
      border:1px solid #00AEEE;
      border-radius: 24px;
      font-size: 12px;
      margin-left: 8px;
      // margin-top: 4px;
      margin-bottom: 4px;
      color: #00AEEE;

      &.pink {
        border: 1px solid #F18BB1;
        color: #F18BB1;
      }

      .gender-male {
        background-image: url(//fin.91mycloud.com/icon_userinfo_boy.png?2)
      }

      .gender-female {
        background-image: url(//fin.91mycloud.com/icon_userinfo_girl.png?2)
      }

      .gender-ico {
        width: 12px;
        height: 10px;
        display: block;
        padding-top: 2px;
        float: left;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        margin: 2px 4px 0 0;
      }

      .gender-male {
        color: #35adff;
      }
    }
  }


  @media(max-width:340px) {
    .normal-client-detail {
      .right .timeline-content .mark {
        margin-left: 0px;
      }

      .clue-desc {
        padding-top: 0;
      }

      .property-item {
        display: block;
      }
    }
  }
